﻿<!DOCTYPE html>

<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en">
    <!--<![endif]-->
    <!-- BEGIN HEAD -->

    <head>
        <meta charset="utf-8" />
        <title>SuperMgr前端框架</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta content="width=device-width, initial-scale=1" name="viewport" />
        <meta content="" name="description" />
        <meta content="" name="author" />
        <!--全局通用框架样式 begin-->
        <!-- 全局基本样式 -->
        <link href="../content/superui/min/css/superui.common.min.css" rel="stylesheet" />
        <!-- 全局主题样式 -->
        <link href="../content/superui/global/css/components.min.css" id="style_components" rel="stylesheet" />
        <link href="../content/superui/pages/layouts/css/themes/darkblue.min.css" rel="stylesheet" type="text/css" id="style_color" />
        <link href="../content/plugins/jstree/dist/themes/default/style.min.css" rel="stylesheet" />
        <!--全局通用框架样式 end-->


        <link href="jcrop/css/jquery.Jcrop.min.css" rel="stylesheet" />
        <style type="text/css">
                    /* Cubic Bezier Transition */
                    /* Apply these styles only when #preview-pane has
            been placed within the Jcrop widget */
                    #preview-pane {
                        display: block;
                        position: absolute;
                        z-index: 2000;
                        right: -200px;
                        padding: 6px;
                        border: 1px rgba(0, 0, 0, 0.4) solid;
                        background-color: white;
                        -webkit-border-radius: 6px;
                        -moz-border-radius: 6px;
                        border-radius: 6px;
                        -webkit-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
                        -moz-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
                        box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
                    }

                    @media (max-width: 1024px) {
                        #preview-pane {
                            right: 0;
                        }
                    }

                    /* The Javascript code will set the aspect ratio of the crop
            area based on the size of the thumbnail preview,
            specified here */
                    #preview-pane .preview-container {
                        width: 175px;
                        height: 150px;
                        overflow: hidden;
                    }

                    #demo7 {
                        background-color: #eee;
                        width: 500px;
                        height: 330px;
                        font-size: 24px;
                        font-weight: 300;
                        display: block;
                    }
        </style>
      </head>
    <!-- END HEAD -->

    <body>
        <div class="page-container">
                <div class="page-content">
                    <h3 class="page-title"> 图片裁剪组件
                        <small>图片裁剪组件示例</small>
                    </h3>
                    <!-- END PAGE TITLE-->
                    <!-- END PAGE HEADER-->
                    <div class="row">
                        <div class="col-md-12">
                            <div class="m-heading-1 border-green m-bordered">
                                <h3>Jcrop Image Cropping Plugin图片裁剪组件插件</h3>
                                <p>  </p>
                                <p>
                                    <a class="btn red btn-outline" href="https://github.com/tapmodo/Jcrop" target="_blank">官方文档</a>
                                </p>
                            </div>
                            <div class="portlet light portlet-fit bordered">
                                <div class="portlet-title">
                                    <div class="caption">
                                        <i class="icon-settings font-red"></i>
                                        <span class="caption-subject font-red sbold uppercase">编辑表单</span>
                                    </div>
                                    <div class="actions">
                                        <div class="btn-group btn-group-devided" data-toggle="buttons">
                                            <label class="btn btn-transparent red btn-outline btn-circle btn-sm active">
                                                <input type="radio" name="options" class="toggle" id="option1">动作</label>
                                            <label class="btn btn-transparent red btn-outline btn-circle btn-sm">
                                                <input type="radio" name="options" class="toggle" id="option2">设置</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="portlet-body">
                                    <div class="tabbable-line boxless margin-bottom-20">
                                        <ul class="nav nav-tabs">
                                            <li class="active">
                                                <a href="#tab_1" data-toggle="tab"> 基本 </a>
                                            </li>
                                            <li>
                                                <a href="#tab_2" data-toggle="tab"> 表单融合 </a>
                                            </li>
                                            <li>
                                                <a href="#tab_3" data-toggle="tab"> 视觉效果 </a>
                                            </li>
                                            <li>
                                                <a href="#tab_4" data-toggle="tab"> 动画demo </a>
                                            </li>
                                            <li>
                                                <a href="#tab_5" data-toggle="tab"> 实时API</a>
                                            </li>
                                            <li>
                                                <a href="#tab_6" data-toggle="tab"> 自定义风格 </a>
                                            </li>
                                            <li>
                                                <a href="#tab_7" data-toggle="tab"> 无图</a>
                                            </li>
                                            <li>
                                                <a href="#tab_8" data-toggle="tab"> PHP 裁剪 </a>
                                            </li>
                                        </ul>
                                        <div class="tab-content">
                                            <div class="tab-pane active" id="tab_1">
                                                <h4>本示例演示Jcrop默认效果。</h4>
                                                <p>由于没有事件处理只进行裁剪行为. </p>
                                                <img src="/content/plugins//jcrop/demos/demo_files/image1.jpg" id="demo1" alt="Jcrop 示例" class="img-responsive"
                                                /> </div>
                                            <div class="tab-pane" id="tab_2">
                                                <div class="row">
                                                    <div class="col-md-7 col-sm-12 responsive-1024">
                                                        <h4>一个基本事件处理的例子</h4>
                                                        <p>在这里，我们用一个简单的事件处理程序调用了几个表单值。其结果是，在实时的选择被改变时，通过Jcrop的<em>onChange</em>事件可以发现，表单的值被实时更新。
                                                        </p>
                                                        <img src="/content/plugins//jcrop/demos/demo_files/image2.jpg" id="demo2" alt="Jcrop 例子" class="img-responsive" /> </div>
                                                    <div class="col-md-5 col-sm-12 responsive-1024">
                                                        <h4>图片详情:</h4>
                                                        <form id="coords" class="coords form-inline" onsubmit="return false;" action="#">
                                                            <table class="table table-bordered">
                                                                <tr>
                                                                    <td>
                                                                        <label class="control-label">X1</label>
                                                                    </td>
                                                                    <td>
                                                                        <input type="text" id="x1" name="x1" class="form-control btn-sm" /> </td>
                                                                </tr>
                                                                <tr>
                                                                    <td>
                                                                        <label class="control-label">Y1</label>
                                                                    </td>
                                                                    <td>
                                                                        <input type="text" id="y1" name="y1" class="form-control btn-sm" /> </td>
                                                                </tr>
                                                                <tr>
                                                                    <td>
                                                                        <label class="control-label">X2</label>
                                                                    </td>
                                                                    <td>
                                                                        <input type="text" id="x2" name="x2" class="form-control btn-sm" /> </td>
                                                                </tr>
                                                                <tr>
                                                                    <td>
                                                                        <label class="control-label">Y2</label>
                                                                    </td>
                                                                    <td>
                                                                        <input type="text" id="y2" name="y2" class="form-control btn-sm" /> </td>
                                                                </tr>
                                                                <tr>
                                                                    <td>
                                                                        <label class="control-label">宽</label>
                                                                    </td>
                                                                    <td>
                                                                        <input type="text" id="w" name="w" class="form-control btn-sm" /> </td>
                                                                </tr>
                                                                <tr>
                                                                    <td>
                                                                        <label class="control-label">高</label>
                                                                    </td>
                                                                    <td>
                                                                        <input type="text" id="h" name="h" class="form-control btn-sm" /> </td>
                                                                </tr>
                                                            </table>
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="tab-pane" id="tab_3">
                                                <h4>图片预览demo</h4>
                                                <p> 很明显，最直观的演示，预览窗格中完成完全在一个简单的jQuery回调Jcrop实现对这种类型的接口可能是有用的创建一个缩略图或头像。
onChange事件处理程序用于更新在预览窗格中查看。 </p>
                                                <div class="row">
                                                    <div class="col-md-6 responsive-1024">
                                                        <img src="/content/plugins//jcrop/demos/demo_files/image3.jpg" id="demo3" alt="Jcrop Example" /> </div>
                                                    <div class="col-md-6 responsive-1024">
                                                        <div id="preview-pane">
                                                            <div class="preview-container">
                                                                <img src="/content/plugins//jcrop/demos/demo_files/image3.jpg" class="jcrop-preview" alt="Preview" /> </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="tab-pane" id="tab_4">
                                                <div class="row">
                                                    <div class="col-md-7 responsive-1024">
                                                        <img src="/content/plugins//jcrop/demos/demo_files/image5.jpg" id="demo4" alt="Jcrop Example" />
                                                        <div id="shadetxt" style="display:none !important">
                                                            <h4>着色效果.</h4> Jcrop现在包括促进建立更好的透明Jcrop实例的着色模式。实验着色器比Jcrop默认着色方法不太可靠的，如果你需要此功能只能使用。 </div>
                                                        <div>
                                                            <h4>动画/全视线.</h4>animateTo API方法的示范和转换为BGCOLOR和BG不透明度选项. 
                                                            <a href="http://plugins.jquery.com/project/color">
                                                                选择动画 </a> 插件.如果不包含它，颜色不会褪色。 </div>
                                                    </div>
                                                    <div class="col-md-5 responsive-1024">
                                                        <div class="row">
                                                            <div class="col-md-12" id="interface">
                                                                <div class="checkbox-list margin-top-10">
                                                                    <label>
                                                                        <input type="checkbox" id="fadetog" /> 开启褪色 (bgFade: true) </label>
                                                                    <label>
                                                                        <input type="checkbox" id="shadetog" /> 使用着色器实验 (shade: true) </label>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="tab-pane" id="tab_5">
                                                <div class="row">
                                                    <div class="col-md-7 responsive-1024">
                                                        <img src="/content/plugins//jcrop/demos/demo_files/image5.jpg" id="demo5" alt="Jcrop Example" /> </div>
                                                    <div class="col-md-5 util-btn-margin-bottom-5 responsive-1024">
                                                        <h3>实时API</h3>
                                                        <span class="requiresjcrop">
                                                            <button id="setSelect" class="btn default">设置选择</button>
                                                            <button id="animateTo" class="btn default">触发动画</button>
                                                            <button id="release" class="btn default">发布</button>
                                                            <button id="disable" class="btn default">禁用</button>
                                                        </span>
                                                        <button id="enable" class="btn default" style="display:none;">重新启用</button>
                                                        <button id="unhook" class="btn default">销毁!</button>
                                                        <button id="rehook" class="btn default" style="display:none;">附加Jcrop</button>
                                                        <fieldset class="optdual requiresjcrop">
                                                            <h4>切换设置</h4>
                                                            <div class="checkbox-list">
                                                                <label>
                                                                    <input type="checkbox" id="ar_lock" />宽高比</label>
                                                                <label>
                                                                    <input type="checkbox" id="size_lock" />最小尺寸/最大尺寸设置</label>
                                                                <label>
                                                                    <input type="checkbox" id="can_click" />允许新的选择</label>
                                                                <label>
                                                                    <input type="checkbox" id="can_move" />选择可以被移动</label>
                                                                <label>
                                                                    <input type="checkbox" id="can_size" />可调整大小的选择</label>
                                                            </div>
                                                        </fieldset>
                                                        <fieldset class="requiresjcrop">
                                                            <h4>修改图片</h4>
                                                            <div class="btn-group">
                                                                <button class="btn default" id="img2">Pool（效果）</button>
                                                                <button class="btn default active" id="img1">Sago（效果）</button>
                                                                <button class="btn default" id="img3">Sago w/ outerImage（效果）</button>
                                                            </div>
                                                        </fieldset>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="tab-pane" id="tab_6">
                                                <div class="row">
                                                    <div class="col-md-7 responsive-1024">
                                                        <img src="/content/plugins//jcrop/demos/demo_files/image4.jpg" id="demo6" alt="Jcrop Example" /> </div>
                                                    <div class="col-md-5 responsive-1024">
                                                        <h4>操作类</h4>
                                                        <div class="btn-group" id="buttonbar">
                                                            <button id="radio1" data-setclass="jcrop-light" class="btn active">白色背景框</button>
                                                            <button id="radio2" data-setclass="jcrop-dark" class="btn">深色背景框</button>
                                                            <button id="radio3" data-setclass="jcrop-normal" class="btn">正常</button>
                                                        </div>
                                                        <p>
                                                            <br>
                                                            <b>Jcrop风格切换</b> 点击上面的按钮改变Jcrop的实时的外观。</p>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="tab-pane" id="tab_7">
                                                <p id="demo7">
                                                    <span style="display:block; padding: .5em 1em;"> 这是附加Jcrop到目标不是一个图像的一个例子。您现在正在裁剪一个段落标记。</span>
                                                </p>
                                                <h4>附着Jcrop到一个图像元素。</h4>
                                                <p> 这是实现其他接口大多是有用的，例如 <code>canvas</code> 或者 <code>div</code>. </p>
                                            </div>
                                            <div class="tab-pane" id="tab_8">
                                                <div class="row">
                                                    <div class="col-md-7 responsive-1024">
                                                        <!-- This is the image we're attaching Jcrop to -->
                                                        <img src="/content/plugins//jcrop/demos/demo_files/image5.jpg" id="demo8" alt="Jcrop Example" /> </div>
                                                    <div class="col-md-5 responsive-1024">
                                                        <h4>一个服务器端裁剪脚本.</h4>
                                                        <p> 隐藏的表单值将在做出选择设置.如果你按
                                                            <i>裁剪图片</i> 按钮,表单将提交裁剪 150x150 缩略图命令给服务器. </p>
                                                        <!-- This is the form that our event handler fills -->
                                                        <form action="/content/plugins//jcrop/crop-demo.php" target="_blank" method="post" id="demo8_form">
                                                            <input type="hidden" id="crop_x" name="x" />
                                                            <input type="hidden" id="crop_y" name="y" />
                                                            <input type="hidden" id="crop_w" name="w" />
                                                            <input type="hidden" id="crop_h" name="h" />
                                                            <input type="submit" value="裁剪图片" class="btn btn-large green" /> </form>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- END CONTENT BODY -->
            </div>
        <!--[if lt IE 9]>
    <script src="../content/superui/base/base-core/excanvas.min.js"></script>
    <script src="../content/superui/base/base-core/respond.min.js"></script>
    <![endif]-->
        <!-- 全局公共类库Begin -->
        <script src="../content/superui/min/js/superui.common.min.js"></script>

        <script src="../content/plugins/jcrop/js/jquery.color.js" type="text/javascript"></script>
        <script src="../content/plugins/jcrop/js/jquery.Jcrop.min.js" type="text/javascript"></script>
        
        <script src="../superui/pages/components/form-image-crop.js"></script>
      
    </body>

</html>